<template>
  <div>
    <div class="bindAlipay aui-margin-b-15 aui-ftn14 aui-bg-f">
      <ul
        class="aui-list aui-list-in aui-padded-10"
        style="background-image: none"
      >
        <div class="alipay aui-margin-t-15">
          <div class="cont aui-padded-10">
            <van-row class="aui-margin-b-10 list">
              <van-col span="10">姓名</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <span v-text="user.realname"></span>
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list">
              <van-col span="10">绑定支付宝帐号</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请填写"
                  class="aui-text-right"
                  v-model="user.alipay"
    
                />
              </van-col>
            </van-row>
            <div class="bt aui-padded-15">
              <div class="other">
                <i class="iconfont icon-dianliang aui-text-red aui-ftn22"></i>

                <div class="aui-ftn12 aui-text-red aui-padded-l-5">
                支付宝账号实名必须和平台实名认证信息一致
                </div>
              </div>
            </div>
          </div>
        </div>
      </ul>
      <div class="aui-margin-15 aui-padded-b-10">
        <div
          class="aui-bg-red aui-text-f aui-text-center submit_btn aui-ftn16"
          @click="fnSubmit"
        >
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import User from "../../service/user.js";
export default {
  name: "bindAlipay",
  data() {
    return {
      is: false,
      user: {
        alipay: "",
        uid: "",
        realname: ''
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.user.uid = this.$store.state.uid;
      this.fnGetData();
    },
    fnPreview: function() {
      this.utils.fnPreviewPic([this.alipay_img]);
    },
    fnGetData: function() {
      User.getAlipay({
        uid: this.$store.state.uid,
        isToken: true,
      }).then((res) => {
        if (res && res.status) {
          this.user = {
            ...res.data,
            uid: this.$store.state.uid,
            isToken: true
          }
        }
      });
    },
    fnSubmit: function() {
      if (this.fnCheckData()) {
        const {realname, ...param} = this.user;
        User.postAlipay(param).then((res) => {
          if (res) {
            this.utils.fnMsg(res.msg);
            const vm = this;
            setTimeout(() => {
                vm.utils.fnOpenCommon(vm, {name: 'my'})
            }, 2000)
          }
        });
      }
    },
    // 数据检测
    fnCheckData: function() {
       if (!this.user.alipay) {
        this.utils.fnMsg("请输入收款支付宝帐号");
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div.bindAlipay {
  div.submit_btn {
    height: 50px;
    line-height: 50px;
  }
    
  .other {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
  .cont {
        border: 1px solid #eee;
        border-radius: .25rem;
        .list {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #eee;
            input {
                height: 46px;
                line-height: 46px;
                border: 0;
                max-width: 95%;
            }
        }
      }
      .cont .bt {
          background-color: #FFFCF4;
      }
}
</style>
